<template>
  <div>
    <el-row>
      <Nav></Nav>
    </el-row>
    <el-container class="menuContent">
      <el-header class="header">
        <ul>
          <li @click="toRouter('warnList')" :class="this.active == 'warnList' ?  'active' : ''">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            报警列表
          </li>
          <li @click="toRouter('stopList')" :class="this.active == 'stopList' ?  'active' : ''">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            停用列表
          </li>
          <span v-if="this.Grade !== 'cookie'">
          <li @click="toRouter('warnUser')"  :class="this.active == 'warnUser' ?  'active' : ''" v-if="this.Grade2 !== 2">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            报警配置
          </li>
          </span>
          <span v-if="this.Grade !== 'cookie'">
          <li @click="toRouter('warnHis')"  :class="this.active == 'warnHis' ?  'active' : ''">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            报警历史
          </li>
          </span>
        </ul>
      </el-header>
      <el-main class="mainSection">
        <component :is="overList" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Nav from "../components/index/navbar";
import warnHis from "../components/warnSet/warnHis";
import warnList from "../components/warnSet/warnList";
import stopList from "../components/warnSet/stopList";
import warnUser from "../components/warnSet/warnUser";


export default {
  components: { Nav, warnHis, warnList, stopList, warnUser},
  data() {
    return {
      overList: "warnList",
      active: 'warnList',
      Grade: ''
    };
  },
  created() {
      this.Grade = localStorage.getItem("_token");
      this.Grade2 = localStorage.getItem("当前用户权限")

  },
  methods: {
    //路由跳转
    toRouter(val) {
      // this.$router.push({ path:val})
      this.overList = val;
      console.log(val)
      this.active = val
    }
  },
};
</script>

<style scoped>
.menuContent {
  color: #fff;
}
.header{
    box-sizing: border-box;
    border: 1px solid rgba(89, 129, 165, 0.6);
    background: rgba(89, 129, 165, 0.2);
    padding-left: 0px;
}
.menuContent ul li {
    float: left;
    height: 60px;
    line-height: 60px;
    list-style: none;
    padding: 0 15px;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
    transition: all .4s;
}
.menuContent ul li:hover{
 background: rgba(89, 129, 165, 0.6);

}
.menuContent ul li.active{
 background: rgba(89, 129, 165, 0.6);

}
.menuContent ul li b{
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    width: 9px;
    height: 9px;
}
.menuContent ul li b:nth-child(1){
    border-right: none;
    border-bottom: none;
    top: 0;  
    left: 0;

}
.menuContent ul li b:nth-child(2){
    border-left: none;
    border-bottom: none;
    top: 0;
    right: 0;
}
.menuContent ul li b:nth-child(3){
    border-left: none;
    border-top: none;
    bottom: 0;
    right: 0;
}
.menuContent ul li b:nth-child(4){
    border-right: none;
    border-top: none;
    bottom: 0;
    left: 0;
}
.mainSection{
    box-sizing: border-box;
    border: 1px solid rgba(89, 129, 165, 0.6);
    min-height: 800px;
}
</style>